<script lang='ts' setup>
import { reactive,onMounted,ref} from 'vue'

import InnerDialog from '/@/views/analysis/card/components/InnerDialog.vue' 

const innerDialogVisible = ref(false)
const state = reactive({
    tableData: [
		{
			id: 1,
            storeName: '雁塔店',
			cardItemName: '测试',
			property: '属性名称',
			spec: '规格',
			salesVolume: '销量',
			cellPrice: '销售价格',
			cellRatio: '销售占比',
			notUsedPrice: '未消耗金额',
			notUsedRatio: '未消耗占比',
			popularizePeple: '普及人数',
			popularizeRatio: '普及率',
			holdPeple: '持有人数',
			holdRatio: '持有率',
			lossPeple: '流失人数',
			lossRatio: '流失率',
			serviceCount: '服务量',
			consume: '消耗业绩',
			averageMonth: '月平均',
			averagePeple: '人平均',
			price: '客单价',
			repurchaseCycle: '复购周期',
			serviceGoodRatio: '服务好评率',
			sexRatio: '男女比例',
			age: '年龄'
		}
	] as Array<any>,
    rowId: 0
})

const pageNation = reactive({
    pageNum: 1,
    pageSize: 20,
    total: 0
})

const props = withDefaults(defineProps<{
    id: number,
    modelValue: boolean,
    statistics: number
}>(), {
    statistics: 1
})

const emit = defineEmits(['update:modelValue'])

const closeDialog = () => {
    emit('update:modelValue', false)
}

const previewInfo = (id: number) => {
    state.rowId = id
    innerDialogVisible.value = true
}

/**
 * 分页函数
 */
const handleSizeChange = () => {}
const handleCurrentChange = () => {}

</script>

<template>
    <main>
		<el-dialog title="卡项详情" v-model="props.modelValue" append-to-body  center @close="closeDialog" class="borderRadius10" width="1280">
            <el-table :data="state.tableData" style="width: 100%">
				<el-table-column label="门店" prop="storeName" />
				<el-table-column label="卡项名称" prop="cardItemName" />
				<el-table-column label="属性" prop="property" />
				<el-table-column label="规格" prop="spec" /> 
				<el-table-column  v-if="props.statistics === 4" prop="repurchaseCycle">
					<template #header>
						<section style="display: flex; align-items: center;">
							<span>复购周期</span>
							<el-tooltip  effect="dark" content="复购周期 = 复购周期平均值之和 / 复购总人数"  style=""
								placement="right-start" >
								<svg t="1702367275758" style="transform: translateY(2px);" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2391" width="18" height="18"><path d="M512 64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64z m32 704h-64v-64h64v64z m11.2-203.2l-5.6 4.8c-3.2 2.4-5.6 8-5.6 12.8v58.4h-64v-58.4c0-24.8 11.2-48 29.6-63.2l5.6-4.8c56-44.8 83.2-68 83.2-108C598.4 358.4 560 320 512 320c-49.6 0-86.4 36.8-86.4 86.4h-64C361.6 322.4 428 256 512 256c83.2 0 150.4 67.2 150.4 150.4 0 72.8-49.6 112.8-107.2 158.4z" p-id="2392" fill="#bfbfbf"></path></svg>
							</el-tooltip> 
						</section> 
					</template>
					<!-- <template #default="scope">
						<span></span>
					</template> -->
				</el-table-column>
				<el-table-column label="服务量" prop="serviceCount" v-if="props.statistics === 3" />
				<el-table-column label="消耗业绩" prop="consume" v-if="props.statistics === 3" />
				<el-table-column v-if="props.statistics === 3" prop="averageMonth" >
					<template #header>
						<section style="display: flex; align-items: center;">
							<span>人均月消耗次数</span>
							<el-tooltip  effect="dark" content="人均月消耗次数 = 服务量 / 普及人数"  style=""
								placement="right-start" >
								<svg t="1702367275758" style="transform: translateY(2px);" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2391" width="18" height="18"><path d="M512 64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64z m32 704h-64v-64h64v64z m11.2-203.2l-5.6 4.8c-3.2 2.4-5.6 8-5.6 12.8v58.4h-64v-58.4c0-24.8 11.2-48 29.6-63.2l5.6-4.8c56-44.8 83.2-68 83.2-108C598.4 358.4 560 320 512 320c-49.6 0-86.4 36.8-86.4 86.4h-64C361.6 322.4 428 256 512 256c83.2 0 150.4 67.2 150.4 150.4 0 72.8-49.6 112.8-107.2 158.4z" p-id="2392" fill="#bfbfbf"></path></svg>
							</el-tooltip> 
						</section> 
					</template>
				</el-table-column>
				<el-table-column v-if="props.statistics === 3" prop="averagePeple">
					<template #header>
						<section style="display: flex; align-items: center;">
							<span>人均消耗业绩</span>
							<el-tooltip  effect="dark" content="人均消耗业绩 = 消耗业绩 / 总服务人数"  style=""
								placement="right-start" >
								<svg t="1702367275758" style="transform: translateY(2px);" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2391" width="18" height="18"><path d="M512 64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64z m32 704h-64v-64h64v64z m11.2-203.2l-5.6 4.8c-3.2 2.4-5.6 8-5.6 12.8v58.4h-64v-58.4c0-24.8 11.2-48 29.6-63.2l5.6-4.8c56-44.8 83.2-68 83.2-108C598.4 358.4 560 320 512 320c-49.6 0-86.4 36.8-86.4 86.4h-64C361.6 322.4 428 256 512 256c83.2 0 150.4 67.2 150.4 150.4 0 72.8-49.6 112.8-107.2 158.4z" p-id="2392" fill="#bfbfbf"></path></svg>
							</el-tooltip> 
						</section> 
					</template>
				</el-table-column>
				<el-table-column label="销量" prop="salesVolume" v-if="props.statistics === 1 || props.statistics === 2" />
				<el-table-column label="普及人数" prop="popularizePeple" v-if="props.statistics === 2" />
				<el-table-column v-if="props.statistics === 2" prop="popularizeRatio">
					<template #header>
						<section style="display: flex; align-items: center;">
							<span>普及率</span>
							<el-tooltip  effect="dark" content="普及人数/总会员人数"  style=""
								placement="right-start" >
								<svg t="1702367275758" style="transform: translateY(2px);" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2391" width="18" height="18"><path d="M512 64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64z m32 704h-64v-64h64v64z m11.2-203.2l-5.6 4.8c-3.2 2.4-5.6 8-5.6 12.8v58.4h-64v-58.4c0-24.8 11.2-48 29.6-63.2l5.6-4.8c56-44.8 83.2-68 83.2-108C598.4 358.4 560 320 512 320c-49.6 0-86.4 36.8-86.4 86.4h-64C361.6 322.4 428 256 512 256c83.2 0 150.4 67.2 150.4 150.4 0 72.8-49.6 112.8-107.2 158.4z" p-id="2392" fill="#bfbfbf"></path></svg>
							</el-tooltip>
							
						</section> 
					</template>
				</el-table-column>
				<el-table-column label="持有(现在)人数" prop="holdPeple" v-if="props.statistics === 2" />
				<el-table-column v-if="props.statistics === 2" prop="holdRatio">
					<template #header>
						<section style="display: flex; align-items: center;">
							<span>持有(现在)率</span>
							<el-tooltip  effect="dark" content="持有人数/总人数"  style=""
								placement="right-start" >
								<svg t="1702367275758" style="transform: translateY(2px);" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2391" width="18" height="18"><path d="M512 64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64z m32 704h-64v-64h64v64z m11.2-203.2l-5.6 4.8c-3.2 2.4-5.6 8-5.6 12.8v58.4h-64v-58.4c0-24.8 11.2-48 29.6-63.2l5.6-4.8c56-44.8 83.2-68 83.2-108C598.4 358.4 560 320 512 320c-49.6 0-86.4 36.8-86.4 86.4h-64C361.6 322.4 428 256 512 256c83.2 0 150.4 67.2 150.4 150.4 0 72.8-49.6 112.8-107.2 158.4z" p-id="2392" fill="#bfbfbf"></path></svg>
							</el-tooltip>
							
						</section> 
					</template>
				</el-table-column>
				<el-table-column label="流失人数" prop="lossPeple" v-if="props.statistics === 2" />
				<el-table-column v-if="props.statistics === 2" prop="lossRatio">
					<template #header>
						<section style="display: flex; align-items: center;">
							<span>流失率</span>
							<el-tooltip  effect="dark" content="流失率 = 流失人数 / 普及人数"  style=""
								placement="right-start" >
								<svg t="1702367275758" style="transform: translateY(2px);" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2391" width="18" height="18"><path d="M512 64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64z m32 704h-64v-64h64v64z m11.2-203.2l-5.6 4.8c-3.2 2.4-5.6 8-5.6 12.8v58.4h-64v-58.4c0-24.8 11.2-48 29.6-63.2l5.6-4.8c56-44.8 83.2-68 83.2-108C598.4 358.4 560 320 512 320c-49.6 0-86.4 36.8-86.4 86.4h-64C361.6 322.4 428 256 512 256c83.2 0 150.4 67.2 150.4 150.4 0 72.8-49.6 112.8-107.2 158.4z" p-id="2392" fill="#bfbfbf"></path></svg>
							</el-tooltip>
							
						</section> 
					</template>
				</el-table-column>
				<el-table-column label="销售金额" prop="cellPrice" v-if="props.statistics === 1" />
				<el-table-column prop="cellRatio" v-if="props.statistics === 1 || props.statistics === 4">
					<template #header>
						<section style="display: flex; align-items: center;">
							<span>销售占比</span>
							<el-tooltip  effect="dark" content="销售占比 = 该卡项销售金额之和 / 所有卡项销售金额之和"  style=""
								placement="right-start" >
								<svg t="1702367275758" style="transform: translateY(2px);" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2391" width="18" height="18"><path d="M512 64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64z m32 704h-64v-64h64v64z m11.2-203.2l-5.6 4.8c-3.2 2.4-5.6 8-5.6 12.8v58.4h-64v-58.4c0-24.8 11.2-48 29.6-63.2l5.6-4.8c56-44.8 83.2-68 83.2-108C598.4 358.4 560 320 512 320c-49.6 0-86.4 36.8-86.4 86.4h-64C361.6 322.4 428 256 512 256c83.2 0 150.4 67.2 150.4 150.4 0 72.8-49.6 112.8-107.2 158.4z" p-id="2392" fill="#bfbfbf"></path></svg>
							</el-tooltip>
							
						</section> 
					</template>
				</el-table-column>
				<el-table-column label="未消耗金额" prop="notUsedPrice" v-if="props.statistics === 1" />
				<el-table-column prop="notUsedRatio" v-if="props.statistics === 1 || props.statistics === 4">
					<template #header>
						<section style="display: flex; align-items: center;">
							<span>未消耗占比</span>
							<el-tooltip effect="dark" content="未消耗占比 = 该卡项未消耗金额之和 / 该卡项销售金额之和" 
								placement="left-start" >
								<svg t="1702367275758" style="transform: translateY(2px);" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2391" width="18" height="18"><path d="M512 64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64z m32 704h-64v-64h64v64z m11.2-203.2l-5.6 4.8c-3.2 2.4-5.6 8-5.6 12.8v58.4h-64v-58.4c0-24.8 11.2-48 29.6-63.2l5.6-4.8c56-44.8 83.2-68 83.2-108C598.4 358.4 560 320 512 320c-49.6 0-86.4 36.8-86.4 86.4h-64C361.6 322.4 428 256 512 256c83.2 0 150.4 67.2 150.4 150.4 0 72.8-49.6 112.8-107.2 158.4z" p-id="2392" fill="#bfbfbf"></path></svg>
							</el-tooltip>
							
						</section> 
					</template>
				</el-table-column>
				<el-table-column label="操作" v-if="props.statistics === 1">
					<template #default="scope">
						<el-link :underline="false" type="primary" @click="previewInfo(scope.row.id)">查看详情</el-link>
					</template>
				</el-table-column>
			</el-table>

            <section class="mt15">
				<el-row justify="end">
					<el-col :span="24" class="flex-end-center">
						<el-pagination
						v-model:current-page="pageNation.pageNum"
						v-model:page-size="pageNation.pageSize"
						:page-sizes="[10, 20, 30]"  
						:background="true"
						layout="total, sizes, prev, pager, next, jumper"
						:total="pageNation.total"
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						/>
					</el-col>
				</el-row> 
			</section>
        </el-dialog>

        <InnerDialog v-model="innerDialogVisible" :id="state.rowId" />
    </main>
</template>

<style lang='scss' scoped>

</style>